<template>
  <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
    <div class="FormatData">
      <div class="mb">
        <Title title="开本数据"></Title>

        <div class="fl vc bt w plr_16 bg_fff">
          <div class="bk_ec bkra8 mb10 wb49">
            <div class="fl vend color_333">
              <span class="ct" :class="statisticsData.dayScriptNum >= 1000 && statisticsData.dayImitateScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.dayScriptNum }}</span>
              <span class="dx_20">/</span>
              <span class="ct" :class="statisticsData.dayScriptNum >= 1000 && statisticsData.dayImitateScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.dayImitateScriptNum }}</span>
            </div>
            <p class="dx_13 color_8c mt_14">今日开本数<span class="dx_11">(正式/模拟)</span></p>
          </div>
          <div class="bk_ec bkra8 mb10 wb49">
            <div class="fl vend color_333">
              <span class="ct" :class="statisticsData.dayFormalStoreNum >= 1000 && statisticsData.dayImitateStoreNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.dayFormalStoreNum }}</span>
              <span class="dx_20">/</span>
              <span class="ct" :class="statisticsData.dayFormalStoreNum >= 1000 && statisticsData.dayImitateStoreNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.dayImitateStoreNum }}</span>
            </div>
            <p class="dx_13 color_8c mt_14">今日店铺数<span class="dx_11">(正式/模拟)</span></p>
          </div>
          <div class="bk_ec bkra8 mb10 wb49">
            <div class="fl vend color_333">
              <span class="ct" :class="statisticsData.monthScriptNum >= 1000 && statisticsData.monthImitateScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.monthScriptNum }}</span>
              <span class="dx_20">/</span>
              <span class="ct" :class="statisticsData.monthScriptNum >= 1000 && statisticsData.monthImitateScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.monthImitateScriptNum }}</span>
            </div>
            <p class="dx_13 color_8c mt_14">月开本数<span class="dx_11">(正式/模拟)</span></p>
          </div>
          <div class="bk_ec bkra8 mb10 wb49">
            <div class="fl vend color_333">
              <span class="ct" :class="statisticsData.yearScriptNum >= 1000 && statisticsData.yearImitateScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.yearScriptNum }}</span>
              <span class="dx_20">/</span>
              <span class="ct" :class="statisticsData.yearScriptNum >= 1000 && statisticsData.yearImitateScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.yearImitateScriptNum }}</span>
            </div>
            <p class="dx_13 color_8c mt_14">年开本数<span class="dx_11">(正式/模拟)</span></p>
          </div>
          <div class="bk_ec bkra8 mb10 wb49">
            <div class="fl vend color_333">
              <span class="ct" :class="statisticsData.sumImitateScriptNum >= 1000 && statisticsData.sumScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.sumScriptNum }}</span>
              <span class="dx_20">/</span>
              <span class="ct" :class="statisticsData.sumImitateScriptNum >= 1000 && statisticsData.sumScriptNum >= 1000 ? 'dx_20' : 'dx_24'">{{ statisticsData.sumImitateScriptNum }}</span>
            </div>
            <p class="dx_13 color_8c mt_14">总开本数<span class="dx_11">(正式/模拟)</span></p>
          </div>
        </div>

        <Type @changeScript="changeScript" @changeDate="changeDate" :scriptList="scriptList"></Type>

        <ChartType @changeChart="changeChart"></ChartType>

        <FormatChart ref="FormatChart" v-show="chartList.length > 0"></FormatChart>
        <div v-if="chartList.length == 0" class="bg_fff">
          <van-empty description="暂无数据~" />
        </div>
      </div>

      <div class="bg_fff" v-if="detailList.length > 0">
        <Title title="开本详情"></Title>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="wb fl vc bg_fa dx_13">
            <div class="wb30 fl pdl_10 pad_5_10">日期</div>
            <div class="wb30 fl bkl_e7 bkr_e7 pad_5_16">剧本</div>
            <div class="wb40 fl pad_5_10">{{ dataType == 1 ? '累计数据' : '每期数据'}}<span class="dx_11">(正式/模拟)</span></div>
          </div>
          <div class="wb fl vc dx_12 color_666" v-for="(item, index) in detailList" :key="index">
            <div class="wb30 pad_10">{{ item.time }}</div>
            <div class="wb30 omit bkl_e7 bkr_e7 pad_10_16">{{ scriptId ? scriptName : '所有剧本' }}</div>
            <div class="wb40 pad_10">{{ item.openScriptNum || 0 }} / {{ item.imitateOpenScriptNum || 0 }}</div>
          </div>
        </van-list>
      </div>
      
    </div>
  </van-pull-refresh>
</template>

<script>
import Title from '../components/Title.vue'
import Type from '../components/Type.vue'
import ChartType from '../components/ChartType.vue'
import FormatChart from '../components/FormatChart.vue'

import { reportStoreOpenScript, reportStoreMyOpenScriptData, reportStoreOpenScriptDetails } from '@/api/chart.js'
import { List, PullRefresh } from 'vant';
import mathUtil from '@/utils/mathUtil'
export default {
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    Title,
    Type,
    ChartType,
    FormatChart,
  },

  props: {
    scriptList: {
      type: [Object, Array],
      default: () => [],
    }
  },

  data() {
    return {
      mathUtil,
      scriptId: '',
      scriptName: '',
      dataType: 0,
      timeType: 0,

      statisticsData: {},

      chartList: [],
      isLoading: false,

      refreshLoading: false,

      queryParams: {
        pageNum: 1,
        pageSize: 30
      },
      detailList: [],
      loading: true,
      finished: false,
    };
  },

  watch: {
    "$store.state.token": {
      handler:function() { 
        this.getMyOpenScript()
        this.getOpenScriptList()
        this.getOpenScriptDetail()
      }
    }
  },

  created() {
    if (this.$store.state.token || sessionStorage.getItem('cspace-token')) {
      this.getMyOpenScript()
      this.getOpenScriptList()
      this.getOpenScriptDetail()
    }
  },

  methods: {
    changeScript(id, name) {
      console.log('scriptId', id)
      this.scriptId = id
      this.scriptName = name
      this.getMyOpenScript()
      this.getOpenScriptList()
      this.queryParams.pageNum = 1
      this.getOpenScriptDetail()
    },

    changeDate(id) {
      console.log('timeType', id)
      this.timeType = id
      this.getMyOpenScript()
      this.getOpenScriptList()
      this.queryParams.pageNum = 1
      this.getOpenScriptDetail()
    },

    changeChart (id) {
      console.log('dataType', id)
      this.dataType = id
      this.getMyOpenScript()
      this.getOpenScriptList()
      this.queryParams.pageNum = 1
      this.getOpenScriptDetail()
    },

    onRefresh() {
      setTimeout(() => {
        this.refreshLoading = false;
        this.finished = true
        this.getMyOpenScript()
        this.getOpenScriptList()
        this.queryParams.pageNum = 1
        this.getOpenScriptDetail()
      }, 1000);
    },

    onLoad() {
      if (this.isLoading) return
      console.log('到底')
      this.queryParams.pageNum += 1
      this.getOpenScriptDetail()
    },

    // 获取我的开本（统计）
    async getMyOpenScript () {
      try {
        const params = {
          request: {
            dto: {
              scriptId: this.scriptId,
            }
          }
        }
        const res = await reportStoreMyOpenScriptData(params)
        console.log('统计数据', res)
        if (res.errorCode === 0) {
          this.statisticsData = res.response
        }
      } catch (error) {
        console.error(error)
      }
    },

    // 获取开本数据（图表）
    async getOpenScriptList () {
      this.isLoading = true
      try {
        const params = {
          request: {
            dto: {
              scriptId: this.scriptId,
              timeType: this.timeType,
              dataType: this.dataType
            }
          }
        }
        const res = await reportStoreOpenScript(params)
        console.log('图表数据', res)
        if (res.errorCode === 0) {
          if (res.response.length > 0) {
            this.chartList = res.response.reverse().map(item => {
              return {
                value: item.openScriptNum || 0,
                time: this.timeType == 1 ? item.yearNum.replace(/-/g,"/") : this.timeType == 2 ? item.monthNum.replace(/-/g,"/") : item.days.replace(/-/g,"/")
              }
            })
            this.$refs.FormatChart.initData(this.chartList, this.dataType)
          } else {
            this.chartList = []
          }
        }
        this.isLoading = false
      } catch (error) {
        console.error(error)
        this.isLoading = false
      }
    },

    // 获取开本详情
    async getOpenScriptDetail () {
      try {
        const params = {
          request: {
            dto: {
              ...this.queryParams,
              scriptId: this.scriptId,
              timeType: this.timeType,
              dataType: this.dataType
            }
          }
        }
        
        const res = await reportStoreOpenScriptDetails(params)
        console.log('开本详情', res)
        if (res.errorCode === 0) {
          if (res.response.length) {
            res.response.forEach(item => {
              item.openScriptNum = item.openScriptNum || 0
              item.time = this.timeType == 1 ? item.yearNum.replace(/-/g,"/") : this.timeType == 2 ? item.monthNum.replace(/-/g,"/") : item.days.replace(/-/g,"/")
            })
            this.detailList = this.queryParams.pageNum > 1 ? [...this.detailList, ...res.response] : res.response
          }
          else {
            this.detailList = this.queryParams.pageNum > 1 ? this.detailList : res.response
          }
          if (res.response.length < this.queryParams.pageSize) {
            this.finished = true
            this.loading = true
          } else {
            this.finished = false
            this.loading = false
          }
        }
      } catch (error) {
        console.error(error)
      }
    }

  }
};
</script>

<style lang="less">
.FormatData {
}
.dx_11 {
  font-size: 11px;
}

</style>
